<template>
  <div class="main">
    <keep-alive>
      <router-view :key="timeStamp"></router-view>
    </keep-alive>
    <!-- 初始界面 -->
    <transition name="fade">
      <first-left-page v-show="firstPageShow"></first-left-page>
    </transition>
    <!-- 数据表 -->
    <el-table :data="tableData" :key="timeStamp" v-show="identifyDataShow">
      <el-table-column prop="key" label="字段" width="150" />
      <el-table-column prop="value" label="数值" width="360" />
    </el-table>
  </div>
</template>

<script>
/* eslint-disable */
import firstLeftPage from "@/views/contentList/firstLeftPage";
import pubsub from "pubsub-js";
import { getCurrentInstance, onMounted } from "@vue/runtime-core";

export default {
  name: "leftContainer",
  components: {
    firstLeftPage,
  },
  data() {
    return {
      identifyDataShow: false,
      firstPageShow: true,
      timeStamp: new Date().getTime(),
      tableData: [],
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    let subList = [];
    // 属性字典
    let keyLists = [
      // 国有土地
      [
        {
          key: "QLR",
          value: "权利人",
        },
        {
          key: "TDYTSM",
          value: "土地用途说明",
        },
        {
          key: "TDZL",
          value: "土地租赁",
        },
        {
          key: "CLMJ",
          value: "面积(m²)",
        },
      ],
      // 基本农田
      [
        {
          key: "QSDWMC",
          value: "权属单位名称",
        },
        {
          key: "JBNTMJ",
          value: "面积(m²)",
        },
        {
          key: "XZQHMC",
          value: "现状区划名称",
        },
        {
          key: "ZRR",
          value: "责任人",
        },
        {
          key: "DLMC",
          value: "地类名称",
        },
        {
          key: "ZZSXMC",
          value: "种植属性名称",
        },
        {
          key: "Shape_Area",
          value: "面积(㎡)",
        },
      ],
      // 推荐配变位置
      [
        {
          key: "名称",
          value: "名称",
        },
        {
          key: "用地性质",
          value: "用地性质",
        },
        {
          key: "权属信息",
          value: "权属信息",
        },
        {
          key: "尺寸",
          value: "尺寸",
        },
      ],
    ];
    // 图层类型判别
    let layerIdentify = ["TDYTSM", "QSDWMC", "尺寸"];

    onMounted(() => {
      //首页隐藏
      subList[0] = pubsub.subscribe("firstPageShowChange", (n, data) => {
        proxy.firstPageShow = data;
      });
      //企业信息展示
      subList[1] = pubsub.subscribe("identifyDataShow", (n, data) => {
        console.log(data);
        proxy.firstPageShow = false;
        proxy.identifyDataShow = true;
        proxy.tableData = [];
        // 判断图层类型
        let dictionaryIndex = 0;
        for (let key in data) {
          layerIdentify.forEach((element) => {
            if (element === key)
              dictionaryIndex = layerIdentify.indexOf(element);
          });
          console.log(dictionaryIndex);
          // if (
          //   key != "X" &&
          //   key != "Y" &&
          //   key != "FID" &&
          //   key != "Shape_Length" &&
          //   key != "Shape_Area"
          // )
          //   if (data[key] != undefined && data[key] != " ")
          //     proxy.tableData.push({
          //       key: key,
          //       value: data[key],
          //     });
        }
        let keyList = keyLists[dictionaryIndex];
        console.log(keyList);
        for (let key in data) {
          keyList.forEach((element) => {
            if (element.key === key) {
              proxy.tableData.push({
                key: element.value,
                value: data[key],
              });
            }
          });
        }
        console.log(proxy.tableData);
      });
      //企业信息退出
      subList[2] = pubsub.subscribe("quitEnterprise", (n, data) => {
        proxy.firstPageShow = true;
        proxy.identifyDataShow = false;
        proxy.tableData = [];
      });
      // 图斑查询退出
      subList[3] = pubsub.subscribe("AddJson", (n, data) => {
        if (!data.isChecked) {
          console.log("清除");
          proxy.tableData = [];
          proxy.firstPageShow = true;
          proxy.identifyDataShow = false;
        }
      });
      // 信息直接显示
      subList[4] = pubsub.subscribe("dataDisplay", (n, data) => {
        if (data.show) {
          proxy.tableData = data.tableData;
          proxy.identifyDataShow = true;
        } else {
          proxy.tableData = [];
          proxy.identifyDataShow = false;
        }
      });
    });
    return { subList };
  },
  beforeDestroy() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
  beforeRouteLeave() {
    this.subList.forEach((element) => {
      pubsub.unsubscribe(element);
    });
  },
};
</script>

<style lang="less" scoped>
.main {
  // background-color: rgba(255, 255, 255, 0.92);
  background-image: linear-gradient(
    to right,
    rgba(6, 19, 31, 1),
    rgba(6, 19, 31, 0.2) 95%,
    rgba(6, 19, 31, 0)
  );
  height: 100%;
  width: 20%;
  position: absolute;
  z-index: 1000;
  // top: 6%;
  left: 0%;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}

.el-table {
  font-weight: bold;
  font-size: 120%;
}

.fade-enter-active {
  transition: all 0.3s ease-out;
}

.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.3, 1);
  transform: translateX(-30%);
}

.fade-enter-from,
.fade-leave-to {
  transition: 0.3s;
  transform: translateX(-30%);
  opacity: 0;
}
</style>